#!/bin/bash
# Create a GitHub issue for writing tests for the backlog feature
gh issue create \
  --title "Write test for Backlog task status dropdown feature" \
  --body "## Context
A test was skipped in PR `#1391` as part of a hotfix to show task status dropdown for backlog task status.

**Skipped test:**
\`\`\`typescript
it.skip('should show text Backlog when a task with Backlog status is passed down.', () => {
    const oldProgress = 100;
    const oldStatus = BACKEND_TASK_STATUS.BACKLOG;

    render(
        <TaskStatusDropdown
            oldProgress={oldProgress}
            oldStatus={oldStatus}
            onChange={onChange}
        />
    );
    const element = screen.getByTestId('task-status-backlog');
    expect(element).toHaveTextContent('Backlog');
});
\`\`\`

**File:** \`__tests__/Unit/Components/Tasks/TaskStatusDropdown.test.tsx\`

## Task
- [ ] Unskip and fix the test for backlog status display
- [ ] Ensure the test properly validates the backlog status behavior in TaskStatusDropdown component
- [ ] Verify all related test cases are passing

## References
- PR: `#1391`
- Comment: https://github.com/RealDevSquad/website-status/pull/1391#discussion_r2714057902
- Requested by: `@AnujChhikara`" \
  --assignee AnujChhikara

export const MSG_ON_100_PROGRESS =
    'Proceeding further will make task progress 100%.';

export const MSG_ON_0_PROGRESS =
    'Proceeding further will make task progress 0%.';

export const BACKEND_TASK_STATUS = {
    UN_ASSIGNED,
    ASSIGNED,
    IN_PROGRESS,
    BACKLOG,
    BLOCKED,
    COMPLETED,
    NEEDS_REVIEW,
    IN_REVIEW,
    APPROVED,
    SMOKE_TESTING,
    SANITY_CHECK,
    REGRESSION_CHECK,
    MERGED,
    RELEASED,
    VERIFIED,
    DONE,
};

export function TaskStatusDropdown({
    isDevMode,
    onChange,
    oldStatus,
    oldProgress,
}: Props) {
    const [{ newStatus, newProgress }, setStatusAndProgress] = useState({
        newStatus: oldStatus,
        newProgress: oldProgress,
    });
    const [message, setMessage] = useState('');

    const getAvailableTaskStatuses = () => {
        return Object.entries(BACKEND_TASK_STATUS).filter(
            ([_, value]) => !EXCLUDED_STATUSES.includes(value)
        );
    };

    const taskStatus = getAvailableTaskStatuses();

    const isCurrentTaskStatusBlock = oldStatus === BACKEND_TASK_STATUS.BLOCKED;
    const isCurrentTaskStatusInProgress =
        oldStatus === BACKEND_TASK_STATUS.IN_PROGRESS;

    const shouldTaskProgressBe100 = (newStatus: string) => {
        const isNewStatusInProgress =
            newStatus === BACKEND_TASK_STATUS.IN_PROGRESS;
        const isNewTaskStatusBlock = newStatus === BACKEND_TASK_STATUS.BLOCKED;
        const isCurrProgress100 = oldProgress === 100;
        return (
            (isCurrentTaskStatusBlock || isCurrentTaskStatusInProgress) &&
            !isNewStatusInProgress &&
            !isNewTaskStatusBlock &&
            !isCurrProgress100
        );
    };

    const shouldTaskProgressBe0 = (newStatus: string) => {
        const isNewStatusInProgress =
            newStatus === BACKEND_TASK_STATUS.IN_PROGRESS;
        const isCurrProgress0 = oldProgress === 0;
        return (
            isNewStatusInProgress &&
            !isCurrentTaskStatusBlock &&
            !isCurrProgress0
        );
    };

    const resetProgressAndStatus = () => {
        setStatusAndProgress({
            newStatus: oldStatus,
            newProgress: oldProgress,
        });
        setMessage('');
    };

    const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
        const newStatusValue = ev.target.value;
        setStatusAndProgress((prev) => ({
            ...prev,
            newStatus: newStatusValue,
        }));
        if (oldStatus === newStatusValue) {
            return;
        }
        if (isDevMode && newStatusValue !== BACKEND_TASK_STATUS.BACKLOG) {
            const msg = `The progress of current task is ${oldProgress}%. `;
            if (shouldTaskProgressBe100(newStatusValue)) {
                setStatusAndProgress((prev) => ({ ...prev, newProgress: 100 }));
                setMessage(msg + MSG_ON_100_PROGRESS);
                return;
            }
            if (shouldTaskProgressBe0(newStatusValue)) {
                setStatusAndProgress((prev) => ({ ...prev, newProgress: 0 }));
                setMessage(msg + MSG_ON_0_PROGRESS);
                return;
            }
        }
        onChange({ newStatus: newStatusValue });
    };

    const handleProceed = () => {
        const payload: { newStatus: string; newProgress?: number } = {
            newStatus,
        };
        if (newProgress != oldProgress) {
            payload.newProgress = newProgress;
        }
        onChange(payload);
        setMessage('');
    };

    return (
        <>
            <label
                className={
                    isDevMode ? styles.cardPurposeAndStatusFont : undefined
                }
                data-testid={isDevMode ? 'task-status-label' : undefined}
            >
                Status:{' '}
                <TaskStatusSelect
                    newStatus={newStatus}
                    handleChange={handleChange}
                    taskStatus={taskStatus}
                />
            </label>
            <TaskDropDownModel
                message={message}
                resetProgressAndStatus={resetProgressAndStatus}
                handleProceed={handleProceed}
            />
        </>
    );
}